<!DOCTYPE html>
<html>


<!-- Mirrored from www.zi-han.net/theme/hplus/table_bootstrap.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:20:03 GMT -->
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>轩盛金融</title>
    <meta name="keywords" content="轩盛金融">
    <meta name="description" content="轩盛金融">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="__CSS__/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="__CSS__/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="__CSS__/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="__CSS__/animate.min.css" rel="stylesheet">
    <link href="__CSS__/style.min862f.css?v=4.1.0" rel="stylesheet">
    

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">

        <!-- Panel Other -->
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>新增产品大纲分类</h5>
                <div class="ibox-tools">
                    <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="fa fa-wrench"></i>
                    </a>
                   <!--  <ul class="dropdown-menu dropdown-user">
                        <li><a href="#">选项1</a>
                        </li>
                        <li><a href="#">选项2</a>
                        </li>
                    </ul> -->
                    <a class="close-link">
                        <i class="fa fa-times"></i>
                    </a>
                </div>
            </div>

            <div class="ibox-content">
                <div class="row row-lg">

                    <div class="col-sm-12">
                        <!-- Example Events -->
                        <div class="example-wrap">
                            <!-- <h4 class="example-title">选择产品分类</h4> -->
                            
                            <div class="example">
                                <div class="alert alert-success" id="examplebtTableEventsResult" role="alert">
                                    
                                </div>
                                <div class="btn-group hidden-xs" id="exampleTableEventsToolbar" role="group">
                                    <button type="button" id="addClassfiyBtn" class="btn btn-outline btn-default">
                                        <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
                                    </button>
<!--                                     <button type="button" class="btn btn-outline btn-default">
                                        <i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
                                    </button> -->
                                    <button type="button" class="btn btn-outline btn-default">
                                        <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
                                    </button>

                                </div>
                                
                                <table id="exampleTableEvents" data-height="500" data-mobile-responsive="true">
                                    <thead>
                                        <tr>
                                            <th data-field="state" data-checkbox="true"></th>
                                            <th data-field="id">分类id</th>
                                            <th data-field="name">分类名称</th>
                                            <th data-field="control">操作</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                        <!-- End Example Events -->
                    </div>
                </div>
            </div>

            
            <!--添加分类模态框  -->
            <div class="container">
                
                <div class="modal fade" id="addClassfiy" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">添加新分类</h4>
                      </div>
                      <div class="modal-body">
                        <form id="formTable" class="form-horizontal">
                          <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">分类名称</label>
                            <div class="col-sm-10">
                              <input type="text" name="classfiyName" class="form-control" id="inputEmail3" placeholder="分类名称">
                            </div>
                          </div> 
                        </form>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="upload">保存并提交</button>
                      </div>
                    </div>
                  </div>
                </div>
            </div>

        </div>
        <!-- End Panel Other -->
    </div>
    <script src="__JS__/jquery.min.js?v=2.1.4"></script>
    <script src="__JS__/bootstrap.min.js?v=3.3.6"></script>
    <script src="__JS__/content.min.js?v=1.0.0"></script>
    <script src="__JS__/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="__JS__/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
    <script src="__JS__/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="__JS__/plugins/validate/jquery.validate.min.js"></script>
    <script src="__JS__/plugins/validate/messages_zh.min.js"></script>
    <script type="text/javascript">
        // 表格分类
        var e = [{
            id:1,
            name:2,
            control:'<button class="btn btn-primary"><i class="fa fa-pencil"></i></button> <button class="btn btn-danger"><i class="fa fa-trash-o"></i></button>'
        },
        {
            id:2,
            name:3,
            control:'<button class="btn btn-primary"><i class="fa fa-pencil"></i></button> <button class="btn btn-danger"><i class="fa fa-trash-o"></i></button>'
        }];
        // <a href="/index.php/Admin/Goods/children_equipment_save/id/55" class="btn btn-primary"><i class="fa fa-pencil"></i></a>
        $('#exampleTableEvents').bootstrapTable({
            url: "",
            data:e,
            search: true,
            searchOnEnterKey:true,
            pagination: true,
            showRefresh: true,
            showColumns:true,
            // showToggle: true,
            // showColumns: true,
            iconSize: "outline",
            toolbar: "#exampleTableEventsToolbar",
            icons: {
                refresh: "glyphicon-repeat",
                Columns: "glyphicon-list-alt",
                // columns: "glyphicon-list"
            },
            columns:[

            ],
            striped:true,
        })


        $('#addClassfiyBtn').on('click',function(){
            $("#addClassfiy").modal('show');
        })

        $('#upload').on('click',function(){

            var value = $('input[name=classfiyName]').val();

            if( value === '' ){
                alert('不允许为空');
                return false;

            }else {
                $.ajax({
                    type: "POST",
                    dataType: "json",//预期服务器返回的数据类型
                    url: "/admin/goods/productCatAdd" ,//url
                    data: $('#formTable').serialize(),
                    success: function (data) {

                        console.log(data);//打印服务端返回的数据(调试用)

                        if(data == 1){
                            $('input[name=classfiyName]').val('');

                            $('#addClassfiy').modal('hide');
                        }
                    },
                })
            } 

        })

    </script>

</body>
</html>
